<script setup>
import ChatBox from "./ChatBox.vue";
import {ref} from "vue"
import ComponentLayout from "@/components/component-layout.vue";
import {code} from "./code.js"

const chat = ref([
  {
    id: 1,
    content: "你好啊",
    avatar: "https://avatars.githubusercontent.com/u/1167620?v=4",
    originType: 0,
    replyId: null,
    name: "222"
  },
  {
    id: 1,
    content: "你好啊",
    avatar: "https://avatars.githubusercontent.com/u/1167620?v=4",
    originType: 1,
    replyId: null,
    name: "222"
  },
  {
    id: 1,
    content: "当然可以。以下是一段随机生成的文本：\n" +
        "\n" +
        "在宁静的早晨，阳光透过树叶间的缝隙洒落在小径上，形成斑驳的光影。清风拂过，树叶发出微弱的沙沙声，仿佛在述说着岁月的故事。小鸟在枝头跳跃，欢快地啁啾着，为这个晨曦增添了一丝生机和活力。\n" +
        "\n" +
        "远处，山峦连绵，被薄薄的雾气笼罩着，如同一幅宁静而神秘的画卷。山间的小溪潺潺流淌，清澈见底，偶尔有几只小鱼在水中嬉戏。岸边的野花开得正艳，各色花朵散发出迷人的香气，引得蜜蜂们忙碌地飞舞采蜜。\n" +
        "\n" +
        "沿着小径漫步，可以看到一座古老的庙宇，静静地屹立在山脚下。庙宇的琉璃瓦在阳光下闪烁着微微的光芒，门前的石狮守护着这片宁静的土地。庙内香烟袅袅，几位虔诚的信徒正在虔诚地祈祷，祈求平安和健康。\n" +
        "\n" +
        "这里的一切仿佛与世隔绝，时间仿佛在这里变得缓慢而悠长，每一个细节都充满了生活的温暖和宁静。或许，这就是人们向往的生活状态，远离尘世的喧嚣，享受内心深处的平静与宁静。",
    avatar: "https://avatars.githubusercontent.com/u/1167620?v=4",
    originType: 0,
    replyId: 1,
    name: "111"
  },
  {
    id: 1,
    content: "当然可以。以下是一段随机生成的文本：\n" +
        "\n" +
        "在宁静的早晨，阳光透过树叶间的缝隙洒落在小径上，形成斑驳的光影。清风拂过，树叶发出微弱的沙沙声，仿佛在述说着岁月的故事。小鸟在枝头跳跃，欢快地啁啾着，为这个晨曦增添了一丝生机和活力。\n" +
        "\n" +
        "远处，山峦连绵，被薄薄的雾气笼罩着，如同一幅宁静而神秘的画卷。山间的小溪潺潺流淌，清澈见底，偶尔有几只小鱼在水中嬉戏。岸边的野花开得正艳，各色花朵散发出迷人的香气，引得蜜蜂们忙碌地飞舞采蜜。\n" +
        "\n" +
        "沿着小径漫步，可以看到一座古老的庙宇，静静地屹立在山脚下。庙宇的琉璃瓦在阳光下闪烁着微微的光芒，门前的石狮守护着这片宁静的土地。庙内香烟袅袅，几位虔诚的信徒正在虔诚地祈祷，祈求平安和健康。\n" +
        "\n" +
        "这里的一切仿佛与世隔绝，时间仿佛在这里变得缓慢而悠长，每一个细节都充满了生活的温暖和宁静。或许，这就是人们向往的生活状态，远离尘世的喧嚣，享受内心深处的平静与宁静。",
    avatar: "https://avatars.githubusercontent.com/u/1167620?v=4",
    originType: 0,
    replyId: 1,
    name: "111"
  },
]);

function send(content) {
  chat.value.push({
    id:333,
    content:content,
    avatar: "https://avatars.githubusercontent.com/u/1167620?v=4",
    originType: 0,
    replyId: null,
    name: "222"
  })
}

</script>

<template>
  <component-layout :code>
    <template #preview>
      <div class="outer">
        <ChatBox :chat @send="send"></ChatBox>
      </div>
    </template>
  </component-layout>
</template>

<style scoped>
.outer{
  height:800px;
}
</style>